<template>
    <div>
        <div class="shopcar-container">
            <div class="goods-list">
                
                <div class="mui-card" v-for="item in goodslist" :key="item.id">
                    <div class="mui-card-content">
                        <div class="mui-card-content-inner goods-item">
                            <!--开关-->
                            <mt-switch v-model="selectedObj[item.id]" @change="changeSelect(item.id,selectedObj[item.id])"></mt-switch>
                            <!--图片-->
                            <img :src="item.thumb_path" alt="">
                            <!--信息区域-->
                            <div class="info"> 
                                <h1>{{item.title}}</h1>
                                <div class="goods-info">
                                    <span class="danger">¿{{item.sell_price}}</span>
                                    <numbox :initcount="countObj[item.id]" :id="item.id"></numbox>
                                    <a href="#" @click.prevent="del(item.id)">删除</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!--结算区域-->
                <div class="mui-card">
                    <div class="mui-card-content">
                        <div class="mui-card-content-inner jiesuan">
                            <div class="left">
                                <p>总计（不含运费）</p>
                                <p>
                                    已勾选商品<span class="danger">{{selectedcount}}</span>件，总价<span class="danger">¿{{countamount}}</span>
                                </p>
                            </div>
                            <mt-button type="danger">去结算</mt-button>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
import numbox from "../sub-components/ShopcarNumbox.vue"
import { mapGetters, mapMutations } from 'vuex'
export default {
    data(){
        return {
            goodslist:[],
        };
    },
    created(){
        this.getGoodList()
    },
    methods:{
        ...mapMutations(['delFromCart',"changeSelectState"]),
        async getGoodList(){
            if(this.idstr.length<=0) return
            const {data} = await this.$http.get("/api/goods/getshopcarlist/"+ this.idstr)
            if(data.status===0) return this.goodslist = data.message
        },
        del(id){
            this.goodslist.some((item,i)=>{
                if(item.id == id){
                    this.goodslist.splice(i,1);
                    return true
                }
            });
            //从vuex中删除商品
            this.delFromCart(id);
        },
        changeSelect(id,select){
            console.log(id+"---"+select)
            this.changeSelectState({id,selected:select});
        }
    },
    computed:{
        ...mapGetters(['idstr','countObj','selectedObj','selectedcount','countamount']),
    },
    components:{
        numbox,
    }
}
</script>

<style lang="scss" scoped>
.shopcar-container{
    background-color: #eee;
    overflow: hidden;
}
.goods-item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    img{
        width: 60px;
        height: 60px;
    }
    h1{
        font-size: 13px;
    }
    .info{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        j
        .goods-info{
            display: flex;
            justify-content: space-between;
            align-items: center;

            .price{
                color: red;
                font-weight: bold;
                font-size: 16px;
            }
        }
    }
}
.danger{
    color: red;
    font-weight: bold;
    font-size: 14px;
}
.jiesuan{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>